<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生js实现图片上传</title>
</head>
<body>
    <h1>原生js实现图片上传</h1>
    <input id="chooseFile" type="file" accept="image/*" >
    <button id="btnUpload">上传</button>
    <img src="" alt="" id="preview">
</body>
</html>

<script type="module">
    import {fetchData} from '../common/fetch.js'
    const chooseFile = document.querySelector('#chooseFile'),
        btnUpload = document.querySelector('#btnUpload');
    chooseFile.onchange = e => {
        let file = e.target.files[0]
        console.log(file)

        /* console.log(window.URL.createObjectURL(file)) // glob url
        var reader = new FileReader();
        reader.readAsDataURL(file); // 读取文件
        reader.onload = function(arg) {
            console.log(arg)
        } */

    }
    btnUpload.onclick = () => {
        let fakepath = chooseFile.value,
            file = chooseFile.files[0]
        
        fetchData('file/uploadImg.do', {
            localUrl: fakepath,
            imgFile: file
        }, res => {
            console.log(res)
            document.querySelector('#preview').src = res.url
        })
    }
</script>